<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="icon" href="favicon.ico" type="image/x-icon">

	<title>TotomInc - 主页</title>
	<meta name="description" content="TotomInc - Web dev (front/back) and idle-game creator.">

	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400|Ubuntu+Mono:400,700">

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.5/typed.min.js"></script>

	<style>
	@keyframes terminal {
		0% { opacity: 0; }
		40% { opacity: 0; }
		50% { opacity: 1; }
		90% { opacity: 1; }
		100% { opacity: 0; }
	}

	body {
		width: 100%;
		height: 100%;
		font-family: 'Lato';
		font-weight: 400;
		background-color: #3e3d48;
	}

	h1 {
		font-family: 'Lato';
		font-weight: 300;
		font-size: 2rem;
		color: #ABA8C5;
	}

	h2 {
		max-width: 66%;
		margin-top: 50px;
		margin-bottom: 50px;
		margin-left: auto;
		margin-right: auto;
		font-family: 'Lato';
		font-weight: 300;
		font-size: 1.5rem;
		color: #ABA8C5;
	}

	h3 {
		text-shadow: 3px 3px 6px #444;
		color: #333;
	}

	p {
		color: #333;
	}

	.animate-terminal {
		animation: terminal 1s infinite;
	}

	.tooltip-inner {
		background-color: #32313A;
	}

	.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow,
	.tooltip.bs-tooltip-bottom .arrow {
		display: none !important;
	}

	.navbar {
		background: #3e3d48;
	}

	.navbar-light .navbar-brand {
		font-family: 'Ubuntu Mono';
		font-size: 24px;
		color: #ABA8C5;
		transition: color .25s;
	}

	.navbar-light .navbar-brand:hover,
	.navbar-light .navbar-brand:active,
	.navbar-light .navbar-brand:focus {
		color: #ddd;
	}

	.navbar-light .navbar-nav .nav-link {
		color: #ABA8C5;
		transition: all .25s;
	}

	.navbar-light .navbar-nav .nav-link:hover,
	.navbar-light .navbar-nav .nav-link:active,
	.navbar-light .navbar-nav .nav-link:focus {
		color: #ddd;
	}

	.dropdown-menu {
		left: auto !important;
		right: 0 !important;
		background-color: #32313A;
	}

	.dropdown-item {
		font-size: 14px;
		color: #ABA8C5;
		transition: all .25s;
	}

	.dropdown-item:hover,
	.dropdown-item:focus {
		color: #ddd;
		background-color: transparent;
	}

	.dropdown-divider {
		border-top-color: #3e3d48;
	}

	.container {
		margin-top: 80px;
	}

	.video-wrapper {
	  margin: 50px auto 0 auto;
	  padding: 15px 0 0 0;
	  border: 3px solid #31313A;
	  border-radius: 4px;
	  background-color: #31313A;
	}

	.video-dots {
	  margin-top: -15px;
	  left: 6px;
	}

	.video-dot {
	  display: block;
	  float: right;
	  margin: 3px 3px;
	  width: 8px;
	  height: 8px;
	  border-radius: 50%;
	}

	.video-carousel {
	  position: relative;
	  margin: 15px 0 0 0;
	  width: 100%;
	  background-color: #4D4D5D;
	}

	.video-carousel>img {
	  max-width: 100%;
	}

	.dot-red {
	  background-color: #e52d27;
	}

	.dot-orange {
	  background-color: #FF5722;
	}

	.dot-green {
	  background-color: #8BC34A;
	}
	</style>
</head>

<body>
	<nav class="navbar fixed-top navbar-expand-lg navbar-light">
	  <a class="navbar-brand" href="#"><span class="animate-terminal">></span> root@totominc </a>

		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-mobile" aria-controls="navbar-mobile" aria-expanded="false" aria-label="Toggle navigation">
	    <span class="navbar-toggler-icon"></span>
	  </button>

	  <div class="collapse navbar-collapse" id="navbar-mobile">
			<!-- Games links left -->
			<ul class="navbar-nav mr-auto">
				<li class="nav-item">
	        <a class="nav-link" href="https://github.com/TotomInc/universe-god" target="_blank" data-toggle="tooltip" data-placement="bottom" title="一个新的休闲放置游戏，我最新的和最大的项目。">宇宙之神</a>
	      </li>

				<li class="nav-item">
	        <a class="nav-link" href="http://totominc.github.io/skid-inc/" target="_blank" data-toggle="tooltip" data-placement="bottom" title="一个有黑客主题的休闲游戏。">SkidInc</a>
	      </li>

	      <li class="nav-item">
	        <a class="nav-link" href="http://totominc.github.io/blackmarket/" target="_blank" data-toggle="tooltip" data-placement="bottom" title="我的第一个已发布游戏的项目。">黑市</a>
	      </li>

				<li class="nav-item">
	        <a class="nav-link" href="https://github.com/TotomInc/growing-glory" target="_blank" data-toggle="tooltip" data-placement="bottom" title="使用Node.js，WebSocket和MongoDB的服务器端游戏。">成长荣耀</a>
	      </li>
	    </ul>

			<!-- Essential links right -->
			<ul class="navbar-nav">
				<!-- Links to stuff -->
				<li class="nav-item">
					<a href="https://github.com/TotomInc" target="_blank" class="nav-link" data-toggle="tooltip" data-placement="bottom" title="All my projects are open-source, you can find them on my GitHub.">
						<i class="fa fa-github-alt" aria-hidden="true"></i>
					</a>
				</li>

				<li class="nav-item">
					<a href="https://www.linkedin.com/in/cazade-thomas/" target="_blank" class="nav-link">
						<i class="fa fa-linkedin" aria-hidden="true"></i>
					</a>
				</li>

				<!-- Projects dropdown -->
				<li id="projects-dropdown" class="nav-item dropdown">
	        <a class="nav-link dropdown-toggle" href="#" id="navbar-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<i id="projects-icon" class="fa fa-folder-o" aria-hidden="true"></i> 其它项目
					</a>
	        <div class="dropdown-menu" aria-labelledby="navbar-dropdown">
	          <a class="dropdown-item" target="_blank" href="https://github.com/TotomInc/totominc.github.io"><i class="fa fa-folder" aria-hidden="true"></i> 查看我的早期项目</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" target="_blank" href="http://totominc.github.io/blackmarket-reloaded/"><i class="fa fa-gamepad" aria-hidden="true"></i> 黑市2.0 用 AngularJS 开发的</a>
						<a class="dropdown-item" target="_blank" href="http://totominc.github.io/idle-quester/"><i class="fa fa-trophy" aria-hidden="true"></i> 休闲探险，成长荣耀的祖先</a>
						<a class="dropdown-item" target="_blank" href="http://totominc.github.io/inc-games-rreader/"><i class="fa fa-reddit-alien" aria-hidden="true"></i> Reddit读者实验</a>
				  </div>
	      </li>
	    </ul>
	  </div>
	</nav>

	<div class="container">
		<h1 id="typed-intro" class="text-center"></h1>

		<h2 class="text-center">
			自学了3年的网络技术，我喜欢写干净的代码，就像写一首诗一样。
		</h2>

		<div class="video-wrapper">
			<div class="video-dots">
				<span class="video-dot dot-red"></span>
				<span class="video-dot dot-orange"></span>
				<span class="video-dot dot-green"></span>
			</div>

			<div class="video-carousel">
				<div id="carousel-indicators" class="carousel slide" data-ride="carousel">
					<!-- Carousel indicators -->
				  <ol class="carousel-indicators">
				    <li data-target="#carousel-indicators" data-slide-to="0" class="active"></li>
				    <li data-target="#carousel-indicators" data-slide-to="1"></li>
				    <li data-target="#carousel-indicators" data-slide-to="2"></li>
						<li data-target="#carousel-indicators" data-slide-to="3"></li>
						<li data-target="#carousel-indicators" data-slide-to="4"></li>
						<li data-target="#carousel-indicators" data-slide-to="5"></li>
						<li data-target="#carousel-indicators" data-slide-to="6"></li>
				  </ol>

					<!-- Carousel pictures -->
				  <div class="carousel-inner">
						<div class="carousel-item active">
				      <img class="d-block w-100" src="http://i.imgur.com/vPNIlK1.png" alt="">
							<div class="carousel-caption d-none d-md-block">
						    <h3>宇宙之神</h3>
						  </div>
				    </div>
				    <div class="carousel-item">
				      <img class="d-block w-100" src="http://i.imgur.com/3xCU5Ra.png" alt="">
							<div class="carousel-caption d-none d-md-block">
						    <h3>黑市</h3>
						  </div>
				    </div>
				    <div class="carousel-item">
				      <img class="d-block w-100" src="http://i.imgur.com/u0TBUQD.png" alt="">
							<div class="carousel-caption d-none d-md-block">
						    <h3>SkidInc</h3>
						  </div>
				    </div>
				    <div class="carousel-item">
				      <img class="d-block w-100" src="http://i.imgur.com/G4KpQa4.png" alt="">
							<div class="carousel-caption d-none d-md-block">
						    <h3>Incremental-RPG</h3>
						  </div>
				    </div>
						<div class="carousel-item">
				      <img class="d-block w-100" src="http://i.imgur.com/3D2hy4u.png" alt="">
							<div class="carousel-caption d-none d-md-block">
						    <h3>金钱人生</h3>
						  </div>
				    </div>
						<div class="carousel-item">
				      <img class="d-block w-100" src="http://i.imgur.com/XPd8UZq.png" alt="">
							<div class="carousel-caption d-none d-md-block">
						    <h3>Universe-God (alpha-version)</h3>
						  </div>
				    </div>
						<div class="carousel-item">
				      <img class="d-block w-100" src="http://i.imgur.com/y8jIJjv.png" alt="">
							<div class="carousel-caption d-none d-md-block">
						    <h3>Idle-Quester</h3>
						  </div>
				    </div>
				  </div>

					<!-- Carousel controls -->
				  <a class="carousel-control-prev" href="#carousel-indicators" role="button" data-slide="prev">
				    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
				    <span class="sr-only">上一个</span>
				  </a>
				  <a class="carousel-control-next" href="#carousel-indicators" role="button" data-slide="next">
				    <span class="carousel-control-next-icon" aria-hidden="true"></span>
				    <span class="sr-only">下一个</span>
				  </a>
				</div>
			</div>
		</div>
	</div>

	<script>
	let typed = new Typed('#typed-intro', {
		strings: ['大家好, 我是 TotomInc.', '我是一个网站前端开发人员（也有一点后端）。'],
		showCursor: false,
		typeSpeed: 40,
		backSpeed: 15
	});

	$('[data-toggle="tooltip"]').tooltip();
	</script>
</body>
</html>
